@import 'common.sass'

.story-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .title-box
        width: auto
        height: auto
        display: flex
        flex-direction: column
        align-items: center

        .english
            font-size: vw(18)
            color: $content_color

        .chinese
            font-size: vw(32)
            display: flex
            align-items: center
            color: $title_color

    .element
        width: vw(700)
        height: auto
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        color: $title_color
        font-size: vw(24)
        line-height: vw(48)

        .image-box
            width: vw(600)
            height: vw(200)
            display: flex
            flex-direction: column
            align-items: center
            border-radius: vw(20)

        .one
            background-image: url("images/case/story-1.png")
            background-size: 100% 100%
            background-position: center center

        .two
            background-image: url("images/case/story-2.png")
            background-size: 100% 100%
            background-position: center center

        .three
            background-image: url("images/case/story-3.png")
            background-size: 100% 100%
            background-position: center center

        .four
            background-image: url("images/case/story-4.png")
            background-size: 100% 100%
            background-position: center center

        .title
            font-size: vw(28)
            font-weight: bold

        .content-box
            .line
                text-indent: 2em